<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="description" content="hello ydd 留言板 - 简单易用的在线留言系统">
    <title>hello ydd 留言板（第二版2025）</title>

    <!-- Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- 主容器 -->
<div id="app">
    <el-container>
        <el-header class="main-header">
            <h1>hello ydd 留言板</h1>
        </el-header>

        <el-main>
            <el-card class="message-box">
                <!-- 留言输入区 -->
                <el-form>
                    <el-form-item label="留下您的留言：">
                        <el-input
                                type="textarea"
                                id="message"
                                v-model.trim="message"
                                placeholder="请输入留言内容..."
                                maxlength="500"
                                :autosize="{ minRows: 4 }"
                                show-word-limit
                                resize="none"
                                class="message-input"
                        ></el-input>
                    </el-form-item>

                    <el-button
                            type="primary"
                            @click="submitMessage"
                            :loading="isSubmitting"
                            class="submit-btn"
                    >
                        提交留言
                    </el-button>
                </el-form>

                <!-- 留言列表 -->
                <div class="message-list">
                    <el-divider></el-divider>
                    <el-empty v-if="messages.length === 0 && !isLoading" description="暂无留言"></el-empty>
                    <el-card
                            v-for="item in messages"
                            :key="item.id"
                            class="message-card"
                            shadow="hover"
                    >
                        <div class="message-item">
                            <div class="message-header">
                                <el-tag type="info" size="mini" class="floor-num">{{ item.id }}楼</el-tag>
                                <el-tag type="info" size="mini" class="time-tag">{{ formatTime(item.time) }}</el-tag>
                            </div>
                            <div class="message-content">{{ item.message }}</div>
                            <div class="message-footer">
                                <span class="message-info">{{ item.info }}</span>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-card>
        </el-main>

        <el-footer class="main-footer">
            <p>ydd温馨提示：下面没有了，别tm划了</p>
        </el-footer>
    </el-container>
</div>

<!-- 使用CDN加载依赖 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
